<!-- 自定义顶部导航栏-类型 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="选择类型" name="1">
            <div class="nav-content type-one" :class="{ 'active': type === '1' }" @click="onSelectType('1')">
                <div class="nav-content-left">
                    <el-icon><icon-arrow-left /></el-icon>
                </div>
                <div class="nav-content-title">
                    <span>导航名称</span>
                </div>
            </div>

            <div class="nav-content type-two" :class="{ 'active': type === '2' }" @click="onSelectType('2')">
                <div class="nav-content-left">
                    <el-icon><icon-arrow-left /></el-icon>
                </div>
                <div class="nav-content-title">
                    <div class="search-wrap">
                        <el-icon><icon-search /></el-icon>
                        <span>输入关键词</span>
                    </div>
                </div>
            </div>

            <div class="nav-content type-three" :class="{ 'active': type === '3' }" @click="onSelectType('3')">
                <div class="nav-content-left">
                    <div class="icon-wrap">
                        <el-icon><icon-arrow-left /></el-icon>
                    </div>
                    <div class="split-line"></div>
                    <div class="icon-wrap">
                        <el-icon><icon-home-fill /></el-icon>
                    </div>
                </div>
                <div class="nav-content-title">
                    <span>导航名称</span>
                </div>
            </div>

            <div class="nav-content type-four" :class="{ 'active': type === '4' }" @click="onSelectType('4')">
                <div class="nav-content-left">
                    <div class="icon-wrap">
                        <el-icon><icon-arrow-left /></el-icon>
                    </div>
                    <div class="split-line"></div>
                    <div class="icon-wrap">
                        <el-icon><icon-home-fill /></el-icon>
                    </div>
                </div>
                <div class="nav-content-title">
                    <div class="search-wrap">
                        <el-icon><icon-search /></el-icon>
                        <span>输入关键词</span>
                    </div>
                </div>
            </div>

            <div class="nav-content type-five" :class="{ 'active': type === '5' }" @click="onSelectType('5')">
                <div class="nav-content-left">
                    <el-icon><icon-arrow-left /></el-icon>
                </div>
                <div class="nav-content-title">
                    <div>标题1</div>
                    <div>标题2</div>
                </div>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'CustomTopNavType',
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const type = computed({
            get: () => widget.value.widgetData.eles.customFeature.type,
            set: val => widget.value.widgetData.eles.customFeature.type = val
        })

        const onSelectType = name => {
            const customFeature = widget.value.widgetData.eles.customFeature
            switch (name) {
                case '1':
                    customFeature.iconSrc = 'https://www.waliapp.cn/editor/images/nav-back.png'
                    customFeature.isBack = '0'
                    break;
                case '2':
                    customFeature.iconSrc = 'https://www.waliapp.cn/editor/images/nav-camera.png'
                    customFeature.isBack = '1'
                    customFeature.style.inputStyle.width = '188px'
                    customFeature.style.inputStyle['margin-left'] = '42px'
                    break;
                case '3':
                    customFeature.iconSrc = 'https://www.waliapp.cn/editor/images/nav-home.png'
                    customFeature.isBack = '1'
                    break;
                case '4':
                    customFeature.iconSrc = 'https://www.waliapp.cn/editor/images/nav-home.png'
                    customFeature.isBack = '1'
                    customFeature.style.inputStyle.width = '134px'
                    customFeature.style.inputStyle['margin-left'] = '94px'
                    break;
                case '5':
                    customFeature.isBack = '0'
                    break;
            }
            
            type.value = name
            customFeature.action = ''
        }

        return {
            widget,
            type,
            onSelectType
        }
    }
})
</script>

<style lang="less" scoped>
@import './custom-top-nav-type.less';
</style>